<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-suffix=":"
				class="flex-warp-container"
			>
				<el-form-item
					label="所属商户"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item
					label="所属总代"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.topProxyName"
						clearable
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="上级代理"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						clearable
						v-model.trim="queryData.parentProxyName"
						:placeholder="$t('common.please_enter')"
					/>
				</el-form-item>
				<el-form-item label="会员账号">
					<el-input
						v-model.trim="queryData.userName"
						clearable
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="添加时间"
					class="flex-row-container"
					label-width="77px"
				>
					<el-date-picker
						v-model="formTime.time"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="添加人">
					<el-input
						v-model.trim="queryData.createdBy"
						clearable
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<div class="flexBox">
				<el-button
					v-if="hasPermission('90870073')"
					type="primary"
					@click="handleAdd"
				>
					新增
				</el-button>
				<span v-if="isBatch">
					<el-button @click="handleBatchCancel" class="cancel-btn">
						取消
					</el-button>
					<el-button
						v-if="hasPermission('90870076')"
						type="primary"
						@click="handleBatchDel"
					>
						批量删除
					</el-button>
				</span>
				<span v-else>
					<el-button
						v-if="hasPermission('90870074')"
						type="primary"
						class="batch-btn"
						@click="handleBatch"
					>
						批量操作
					</el-button>
				</span>
			</div>
			<el-table
				ref="multipleTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
				@selection-change="handleSelectionChange"
			>
				<el-table-column
					type="selection"
					width="55"
					align="center"
					v-if="isBatch"
				></el-table-column>
				<el-table-column
					align="center"
					label="序号"
					type="index"
					width="60"
				></el-table-column>
				<el-table-column
					align="center"
					label="会员账号"
					min-width="100"
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantId"
					align="center"
					label="所属商户"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId) || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					width="200px"
					prop="topProxyName"
					align="center"
					label="所属总代"
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="parentProxyName"
					align="center"
					label="上级代理"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					label="添加时间"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					label="添加人"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="remarks"
					align="center"
					label="备注"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remarks || '-' }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" align="center" label="操作">
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('90870075')"
							@click="handleDel(scope.row)"
							type="text"
							size="small"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			center
			width="30%"
			title="新增净资产锁定白名单"
			:visible.sync="dialogFormVisible"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="auto"
				label-suffix=":"
				class="demo-ruleForm"
				@closed="handleClose('ruleForm')"
			>
				<div v-if="result">
					<el-form-item label="以下账号添加成功">
						{{ result.addedSuccessfullys || '-' }}
					</el-form-item>
					<el-form-item label="以下账号重复">
						{{ result.duplicateAccounts || '-' }}
					</el-form-item>
					<el-form-item label="以下账号不存在">
						{{ result.theAccountDoesNotExists || '-' }}
					</el-form-item>
					<el-form-item label="以下账号非信用会员">
						{{ result.nonCreditMembers || '-' }}
					</el-form-item>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">
							关闭
						</el-button>
					</div>
				</div>
				<div v-else>
					<el-form-item
						:label="`${$t('common.belong_merchant')}`"
						prop="merchantId"
					>
						<merchant-select
							v-model="ruleForm.merchantId"
							:placeholder="
								$t('common.components.select_merchant')
							"
							style="width: 100%"
						></merchant-select>
					</el-form-item>
					<el-form-item label="会员账号" prop="assetWhitelist">
						<el-input
							type="textarea"
							v-model="ruleForm.assetWhitelist"
							:autosize="{ minRows: 2 }"
							placeholder="请输入账号，以;分隔"
							style="width: 100%"
						></el-input>
					</el-form-item>
					<el-form-item label="备注" prop="remarks">
						<el-input
							type="textarea"
							v-model="ruleForm.remarks"
							:autosize="{ minRows: 2 }"
							placeholder="请输入"
							maxlength="500"
							show-word-limit
							style="width: 100%"
						></el-input>
					</el-form-item>
					<div slot="footer" class="dialog-footer">
						<el-button @click="handleClose('ruleForm')">
							取消
						</el-button>
						<el-button
							:loading="submitLoading"
							type="primary"
							@click="submitForm('ruleForm')"
						>
							确认
						</el-button>
					</div>
				</div>
			</el-form>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
import dayjs from 'dayjs'

export default {
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			result: null,
			isBatch: false,
			formTime: {
				time: []
			},
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				merchantId: '',
				topProxyName: '',
				parentProxyName: '',
				userName: '',
				createdBy: ''
			},
			tableData: [],
			dialogFormVisible: false,
			ruleForm: {
				assetWhitelist: '',
				remarks: '',
				merchantId: ''
			},
			rules: {
				assetWhitelist: [
					{
						required: true,
						message: '请输入账号，以;分隔',
						trigger: 'blur'
					}
				],
				remarks: [
					{ required: true, message: '请输入备注', trigger: 'blur' }
				],
				merchantId: [
					{
						required: true,
						message: this.$t('member.please_select_a_merchant'),
						trigger: 'change'
					}
				]
			},
			multipleSelection: [],
			submitLoading: false
		}
	},
	created() {},
	methods: {
		handleSelectionChange(val) {
			this.multipleSelection = val
		},
		handleClose(formName) {
			this.$refs[formName] && this.$refs[formName].resetFields()
			this.dialogFormVisible = false
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.submitLoading = true
					this.$api
						.windControllerLevelAddNetAssetLockingList(
							this.ruleForm
						)
						.then((res) => {
							if (res?.code == 200) {
								this.result = res.data
								this.loadData()
							} else {
								this.$message({
									message:
										res?.msg ||
										this.$t('agent.interface_exceptions'),
									type: 'error'
								})
							}
							this.submitLoading = false
						})
				} else {
					this.submitLoading = false
					console.log('error submit!!')
					return false
				}
			})
		},
		handleAdd() {
			this.result = null
			this.ruleForm = {
				merchantId: '',
				assetWhitelist: '',
				remarks: ''
			}
			this.dialogFormVisible = true
		},
		handleBatch() {
			this.isBatch = true
		},
		handleBatchCancel() {
			this.isBatch = false
		},
		handleBatchDel() {
			if (!this.multipleSelection.length) {
				this.$message.info('请至少选择一条数据')
			} else {
				const ids = this.multipleSelection.map((item) => item.id)
				const names = this.multipleSelection
					.map((item) => item.userName)
					.join(',')
				this.$confirm(
					`<strong>是否确认删除白名单会员账号</strong><br/>
					<strong style="word-break: break-all;font-weight:normal">${names} ?</strong>`,
					'确认删除白名单',
					{
						dangerouslyUseHTMLString: true,
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						customClass: 'positionDelIcon'
					}
				)
					.then(() => {
						this.$api
							.windControllerLevelDeleteLockingList({
								ids
							})
							.then((res) => {
								if (res?.code === 200) {
									this.$message({
										type: 'success',
										message: '批量删除成功!'
									})
									this.isBatch = false
									this.loadData()
								} else {
									this.$message({
										message:
											res?.msg ||
											this.$t(
												'agent.interface_exceptions'
											),
										type: 'error'
									})
								}
							})
					})
					.catch(() => {})
			}
		},
		handleDel(val) {
			this.$confirm(
				`是否确认删除白名单会员账号${val.userName}?`,
				'确认删除白名单',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			)
				.then(() => {
					this.$api
						.windControllerLevelDeleteLockingList({
							ids: [val.id]
						})
						.then((res) => {
							if (res?.code === 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								})
								this.loadData()
							} else {
								this.$message({
									message:
										res?.msg ||
										this.$t('agent.interface_exceptions'),
									type: 'error'
								})
							}
						})
				})
				.catch(() => {})
		},
		loadData() {
			this.loading = true
			this.tableData = []
			const [startTime, endTime] = this.formTime.time || []
			let params = {
				...this.queryData,
				updateStartTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				updateEndTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.windControllerLevelQueryAssetLockingList(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {
				merchantId: '',
				topProxyName: '',
				parentProxyName: '',
				userName: '',
				createdBy: ''
			}
			this.formTime.time = []
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.flexBox {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 10px;
}
::v-deep .el-icon-question:after {
	font-size: 12px;
	margin-left: 0;
}
.cancel-btn {
	margin-left: 15px;
}
.dialog-footer {
	display: flex;
	justify-content: center;
}
.batch-btn {
	margin-left: 15px;
}
</style>
